<template>
  <view
    class="item-tag hb-flex hb-whitespace-nowrap hb-items-center hb-justify-center hb-h-4.5 hb-px-2 hb-text-[20rpx] hb-rounded-sm"
    :style="getStyle"
    @click="emit('click')"
  >
    <text v-if="props.icon" class="hb-mr-1">
      <text v-if="props.icon.startsWith('icon-')" class="ali-icon hb-text-xs" :class="[props.icon]"></text>
      <text v-else class="ali-icon hb-text-xs">{{ props.icon }}</text>
    </text>
    <text>{{ props.text }}</text>
  </view>
</template>

<script setup lang="ts">
  const props = defineProps<{
    type: 'superAdmin' | 'admin' | 'member' | 'guest';
    text: string;
    /** ali-icon */
    icon?: string;
  }>();

  const emit = defineEmits<{
    (e: 'click'): void;
  }>();

  const getStyle = computed(() => {
    if (props.type === 'superAdmin') {
      return {
        color: '#EA5E0E',
        backgroundImage: `linear-gradient(90deg, #fdedc7 0.12%, #f7d9a2 100%)`,
      };
    }
    if (props.type === 'admin') {
      return {
        color: '#fff',
        backgroundColor: '#2878FF',
      };
    }
    if (props.type === 'member') {
      return {
        color: '#2878FF',
        backgroundColor: '#D0F7FF',
      };
    }

    return {
      color: '#333',
      backgroundColor: '#F2F3F5',
    };
  });
</script>

<style lang="scss" scoped>
  .item-tag {
    width: fit-content;
  }
</style>
